<template>
  <tv-header></tv-header>
  <button
    type="button"
    @click="handleSidebar"
    class="fixed z-50 bottom-4 right-4 w-16 h-16 rounded-full bg-gray-900 text-white block lg:hidden"
  >
    <span class="sr-only"
      ><font style="vertical-align: inherit"
        ><font style="vertical-align: inherit">开放网站导航</font></font
      ></span
    ><svg
      width="24"
      height="24"
      fill="none"
      class="absolute top-1/2 left-1/2 -mt-3 -ml-3 transition duration-300 transform"
      :class="{ 'opacity-0 scale-80': sidebarHidden }"
    >
      <path
        d="M4 8h16M4 16h16"
        stroke="currentColor"
        stroke-width="2"
        stroke-linecap="round"
        stroke-linejoin="round"
      ></path></svg
    ><svg
      width="24"
      height="24"
      fill="none"
      class="absolute top-1/2 left-1/2 -mt-3 -ml-3 transition duration-300 transform"
      :class="{ 'opacity-0 scale-80': !sidebarHidden }"
    >
      <path
        d="M6 18L18 6M6 6l12 12"
        stroke="currentColor"
        stroke-width="2"
        stroke-linecap="round"
        stroke-linejoin="round"
      ></path>
    </svg>
  </button>
  <div class="w-full max-w-8xl mx-auto">
    <div class="lg:flex">
      <tv-sidebar :sidebar-hidden="sidebarHidden"></tv-sidebar>
      <!-- <v3-scroll size="11" color="#f60" zIndex="2022"> -->
        <tv-wrapper :sidebar-hidden="sidebarHidden">
          <template v-slot:content>
            <slot name="default"></slot>
          </template>
        </tv-wrapper>
      <!-- </v3-scroll> -->
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from "vue";
import TvHeader from "./TvHeader.vue";
import TvSidebar from "./TvSidebar.vue";
import TvWrapper from "./TvWrapper.vue";
import V3Scroll from "../components/V3Scroll.vue";

export default defineComponent({
  name: "tv-tailwind",
  components: {
    [TvHeader.name]: TvHeader,
    [TvSidebar.name]: TvSidebar,
    [TvWrapper.name]: TvWrapper,
    [V3Scroll.name]: V3Scroll,
  },
  setup() {
    const sidebarHidden = ref(false);
    const handleSidebar = () => {
      sidebarHidden.value = !sidebarHidden.value;
    };
    return {
      sidebarHidden,
      handleSidebar,
    };
  },
});
</script>

<style></style>
